<script>
import { onMounted, computed, ref, toRaw } from 'vue';
import Vcode from "vue3-puzzle-vcode";
import { getlogin } from "../assets/api/login"
import { ElMessage } from 'element-plus'
import router from '@/router';
import { useStore } from 'vuex';
import store from '@/store';
import { useRouter } from 'vue-router';
export default {
  components: {
    Vcode
  },
  setup() {
    const store = useStore();
    const input = ref('')
    const password = ref('')
    const checked1 = ref(false)

    const isShow = ref(false);

    let router = useRouter()

    const onShow = () => {

      const username_res = /^[a-zA-Z0-9_-]{4,16}$/;
      if (username_res.test(input.value)) {
        isShow.value = true;
      } else {
        ElMessage.error('请输入正确账号密码')
      }
    };

    const onClose = () => {
      isShow.value = false;
    };

    const onSuccess = () => {

      getloginFun()
      onClose();



    };

    const getloginFun = () => {

      const data = {
        username: input.value,
        password: password.value
      };
      const rawData = toRaw(data);

      getlogin(rawData).then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          store.commit("tokenFun", res.data.data.token)
          router.push('/')

          ElMessage({
            message: res.data.msg,
            type: 'success',
          })

          console.log("vuex===>", dataList.value);
        } else {
          ElMessage.error(res.data.msg)
        }

      })

    }

    //获取vuex的值
    let dataList = computed(() => {
      return store.state.token
    })


    onMounted(() => {


    })

    return {
      input,
      password,
      isShow,
      onShow,
      onClose,
      onSuccess,
      checked1,

    }
  }
}
</script>

<template>
  <div class="login">
    <div class="main_body">
      <div class="qr_code">
        <div class="login-title">欢迎进入<br>后台管理平台</div>
      </div>

      <div class="new_login">
        <div class="login_input">

          <div class="logo">
            <img src="../assets/logo.png" alt="">
          </div>


          <div class="input">
            <div class="user">
              <p>账号:</p><el-input v-model="input" style="width: 350px;height: 40px;" placeholder="请输入账号" />
            </div>
            <div class="password">
              <p>密码:</p><el-input v-model="password" style="width: 350px;height: 40px;" type="password"
                placeholder="请输入密码" show-password />
            </div>
            <div class="day30">
              <el-checkbox v-model="checked1" label="30天免登录" size="large" />
              <p><a href="#">忘记密码</a></p>
            </div>

            <div class="login_btn">
              <el-button type="primary" style="width: 100px;" @click="onShow">登录</el-button>
              <Vcode :show="isShow" @success="onSuccess" @close="onClose" />

            </div>

          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<style lang="scss" scoped>
.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}

.login {
  background: url(../assets//img/demo2.png);
  min-width: 1200px;
  height: 100vh;
  // min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;

  .main_body {
    width: 920px;
    height: 600px;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 138, 233, .15);
    display: flex;
    flex: 1;

    .qr_code {
      float: left;
      width: 600px;
      height: 600px;
      border-radius: 10px 0 0 10px;
      background: url(../assets//img//login-site-bg.png) center center no-repeat;
      position: relative;
      // padding: 0 78px;
      background-size: 380px 600px;

      .login-title {
        font-size: 28px;
        color: #fff;
        letter-spacing: 9px;
        margin: 150px 0 80px 30px;
      }
    }

    .new_login {
      width: 100%;
      height: 100%;
      background-color: #fff;
      opacity: 0.8;
      position: relative;
      float: left;
      border-radius: 0 10px 10px 0;

      .login_input {
        width: 100%;
        height: 100%;
        // margin-top: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;




        .input {

          display: flex;
          width: 100%;
          flex-wrap: wrap;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .user {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 40px;

            p {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 60px;
              height: 32px;
              color: #91979b;
              font-size: 18px;
              font-weight: 500;
            }
          }

          .password {
            display: flex;
            flex-wrap: nowrap;

            p {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 60px;
              height: 32px;
              color: #91979b;
              font-size: 18px;
              font-weight: 500;
            }
          }

          .login_btn {
            padding-top: 40px;
          }

          .day30 {
            padding-top: 40px;
            display: flex;
            width: 70%;
            justify-content: space-between;

            p {
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
            }

          }


        }

      }
    }

  }
}
</style>